<template>
	<div class="tab-title-page goods_list">
		<div class="common_form_search">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="手机号">
					<el-input v-model="searchForm.mobile" placeholder="请输入手机号码" clearable />
				</el-form-item>
				<el-form-item label="下单时间">
					<my-date-picker ref="myDatePicker" />
				</el-form-item>
				<el-form-item label="处理状态">
					<el-select v-model="searchForm.status" placeholder="全部" clearable>
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="search()">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-divider class="middle_divider" />
		<div class="child_page">
			<div class="flex align-center table-top-btns">
				<h5 class="flex align-center">
					<svg-icon style="margin-right: 15px" icon-class="list" :size="15" />数据列表
				</h5>
				<el-button icon="el-icon-edit" size="small" type="success" @click="add()">获取线索</el-button>
			</div>
			<el-table :data="tableData" border :row-class-name="rowStyle" v-show="tableData.length > -1">
				<el-table-column align="center" prop="id" label="订单ID" width="80" />
				<el-table-column align="center" prop="realname" label="姓名" width="70" />
				<el-table-column align="center" prop="mobile" label="手机号码" width="130" />
				<el-table-column align="center" prop="create_time" label="创建时间" width="160" />
				<el-table-column align="center" prop="order_status" label="原订单状态" width="110">
					<template slot-scope="scope">
						<el-tag :type="scope.row.order_status=='待审核'?'':'success'">{{ scope.row.order_status }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="fraud_price" label="押金" width="110" />
				<el-table-column align="center" prop="is_fraud" label="是否命中" width="110">
					<template slot-scope="scope">
						<el-tag :type="scope.row.is_fraud=='未命中'?'success':'danger'">{{ scope.row.is_fraud }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="username_check" label="客服" width="100" />
				<el-table-column align="center" prop="remark" label="处理状态" />
				<el-table-column align="center" fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="handleRemark(scope.row.id)">添加跟进</el-button>
						<el-button size="mini" type="warning" @click="handleLook(scope.row.id)">查看备注</el-button>
					</template>
				</el-table-column>
			</el-table>
			<custom-page ref="customPage" :total="total" :page-size="pageSize" @getList="getList" />
		</div>
		<add-clue ref="addClue" @getList="getList"></add-clue>
		<deal-remark ref="dealRemark" :order-id="id" :type-list="typeList" @getList="getList"></deal-remark>
		<get-remark ref="getOrderRemark" :order-id="id" :type-id="2"></get-remark>

	</div>
</template>
  
<script>
import { getOrderCheckList,getUserOrderCheckClue } from '@/api/complaint'
import { getDouyinRemarkStatus } from '@/api/data'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import addClue from './components/addClue'
import dealRemark from './components/dealRemark'
import getRemark from './components/getOrderRemark'
export default {
	components: { customPage, myDatePicker, addClue, dealRemark, getRemark },
	data() {
		return {
			searchForm: {
				mobile: '',
				create_time: '',
				status:''
			},
			count: {
				no_settle: 0,
				settled: 0,
				refuse_settle: 0
			},
			selectedId: '',
			statusList: [
				{ value: 1, label: '同步成功' },
				{ value: 2, label: '未同步' },
				{ value: 3, label: '未选号' }
			],
			total: 0,
			tableData: [],
			id: '',
			typeList: [],
			pageSize: 50
		}
	},
	methods: {
		handleCurrentChange(e) {
			console.log(e);
		},
		// 添加备注
		handleRemark(id) {
			this.id = id
			this.$refs.dealRemark.dialogVisible = true
		},
		// 查看备注
		handleLook(id) {
			this.id = id
			this.$refs.getOrderRemark.dialogVisible = true
		},
		// 获取数据
		getList(flag) {
			this.typeList = []
			// flag为true, 则不刷新表格
			const { page, pageSize } = this.$refs.customPage
			if (!flag) {
				this.tableData = []
			}
			getOrderCheckList({
				page,
				pageSize: '50',
				...this.searchForm,
			}).then((res) => {
				this.tableData = res.data || []
				this.total = res.total
			})
			
			getDouyinRemarkStatus().then(res=>{
			  for (let index = 0; index < Object.values(res).length; index++) {
				this.typeList.push({
				  id:index+2,
				  name:Object.values(res)[index]
				})
				
			  }
			})
		},
		// 添加
		add() {
			// this.$refs.addClue.dialogVisible = true
			getUserOrderCheckClue().then(res=>{
				console.log(res);
				this.getList()
			})
		},
		// 查询
		search() {
			const pickerVal_start = this.$refs.myDatePicker.getVal()
			if (pickerVal_start !== 'error') {
				this.searchForm.create_time = pickerVal_start
			}
			this.$refs.customPage.page = 1
			this.getList()
		},
		// 重置
		reset() {
			if (this.$refs.myDatePicker) {
				this.$refs.myDatePicker.reset()
			}
			this.searchForm = {
				order_id: '',
				certName: '',
				certId: '',
				goods: '',
			}
			this.getList()
		},
	},
	mounted() {
		this.getList()
	}
}
</script>
  
<style lang="scss" scoped>
.el-button--warning.is-plain {
	color: #ff9f38;
	background: #fff;
	border-color: #ff9f38;
}

.el-icon-upload2 {
	font-size: 18px;
}

.dialog {
	text-align: center;
}

.goods_info {
	.info {
		margin-left: 10px;

		p {
			color: #666666;
		}

		p:first-child {
			color: #999999;
		}
	}
}

.activity {
	line-height: 24px;

	span {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}
}

.child_page {
	padding: 30px;
}

.common_form_search {
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #ffffff;
	border-bottom: 1px solid #eeeeee;
}
</style>
  